<template>
  <div>
    <el-form-item label="封面" :prop="props.cover">
      <el-upload
        action=""
        list-type="picture-card"
        accept=".jpg,.jpeg,.png,.gif,.bmp,.webp"
        :limit="1"
        :auto-upload="false"
        :on-exceed="handleExceed"
        :before-upload="beforeUpdata"
        :on-change="handleChange"
        :file-list="uploadFileList"
        :on-remove="Remove"
        :class="{ hide: hideUpload }"
      >
        <template #default>
          <el-icon class="upload_icon">
            <plus />
          </el-icon>
        </template>
        <template #file="{ file }">
          <div>
            <el-image style="el-upload-list__item-actions" :src="file.url"> </el-image>
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <el-icon><zoom-in /></el-icon>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <el-icon><delete /></el-icon>
              </span>
            </span>
          </div>
        </template>
        <template #tip>
          <div class="el-upload__tip">
            <span
              >单张图片大小不超过2M，支持png；jpg；jpeg；gif等格式</span
            >
          </div>
        </template>
      </el-upload>
    
    </el-form-item>
    <el-dialog custom-class="pre_img_box" v-model="dialogVisible" width="800px">
      <el-image style="image_load" :src="dialogImageUrl"> </el-image>
    </el-dialog>
   </div>
</template>
<script setup lang="ts">
import { ref, reactive, defineProps, onUnmounted, computed } from "vue";
import { ElForm, ElMessage } from "element-plus";
import { Plus, ZoomIn, Download, Delete } from "@element-plus/icons-vue";
import type { UploadFile } from "element-plus/es/components/upload/src/upload";
import { uploadFile, uploadOss, uploadFile2 } from "@/api/common";
import { getSetionId } from "@/utils/utils";
import bus from "@/utils/bus";
const emit = defineEmits(["submit"]);

const formRef = ref<InstanceType<typeof ElForm>>();
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);

var uploadFileList = ref([]);
const hideUpload = computed(()=>{
  return uploadFileList.value.length>0
})
const props = defineProps(['cover']);
const beforeUpdata = (file: any) => {
  const is2M = file.size / 1024 / 1024 <= 2;
  if (!is2M) {
    ElMessage.warning(`上传的图片最大支持2M`);
    return;
  }
  return is2M;
};
const handleRemove = (file: UploadFile) => {
  console.log("删除--", uploadFileList.value,file);
  uploadFileList.value = uploadFileList.value.filter((item:any) => item.code !== file.code);
  emit("submit", uploadFileList.value);
};
const Remove = (file: UploadFile, list: UploadFile[]) => {
  uploadFileList.value = list;
  emit("submit", list);
  bus.emit("empty");
  console.log(file, list, "===自动删除");
};
// 上传文件
const uploadImg = async (file: any) => {
  file = file.raw;
  let flag = beforeUpdata(file);
  if (!flag) return;
  return await uploadFile2({
    file,
    fileName: file.name,
  });
};


// 长传改变
const handleChange = async (file: UploadFile, list: UploadFile[]) => {
  let existFile = list.slice(0, list.length - 1).find((f) => f.name === file.name);
  if (existFile) {
    ElMessage.error("当前文件已经存在!");
    list.pop();
    return;
  }
  const data: any = await uploadImg(file);
  uploadFileList.value.push(data);
  emit("submit", uploadFileList.value);
};
const handleExceed = (file: UploadFile, list: UploadFile[]) => {
  ElMessage.warning(
    `当前限制选择 1个图片，本次选择了 ${file.length} 个文件，共选择了 ${
      file.length + list.length
    } 个图片`
  );
};
// 图片数据回显
const echo = (data: any) => {
  uploadFileList.value.push({ url: data.cover_image_url });
};
// 清空数据回显
const empty = () => {
  uploadFileList.value=[]
};
bus.on("echo", echo);
bus.on("empty", empty);
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
  console.log(dialogImageUrl.value, "----file预览");
};

// 主动暴露方法
defineExpose({ empty,echo });
</script>
<style lang="scss" scoped>
.pre_img_box {
  height: 600px;
  :deep .el-dialog__body{
    padding:20px;
    display: flex;
    align-items: center;
    justify-content: center;
    .image_load {
      display: block;
      margin: auto;
    }
  }
  
}
</style>
<style>
.hide .el-upload--picture-card {
  display: none;
}
.upload_icon {
  width: 140px;
  height: 90px;
}
</style>
